<template>
	<view>
		<view class="body">
			<view class="work_list">
				
				<view class="work_item">
					<view>
						<image :src="jianzhi1.img"></image>
					</view>
					
					<view class="three">
						<view class="price">
							<text>{{jianzhi1.name}}</text>
							
							<text>{{jianzhi1.type}}</text>
						</view>
						
						<view class="name">
							<view class="iconfont icon-gongsi"></view>
							<text>{{jianzhi1.company}}</text>
						</view>
						
						<view class="time1">
							<text>{{jianzhi1.money}}/元每天</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="two">
			<view class="a1">
				<view class="iconfont icon-renshu "></view>
				<text>人数：{{jianzhi1.renshu}}人</text>
			</view>
			<view class="a2">
				<view class="iconfont icon-shijian"></view>
				<text>时间：{{jianzhi1.time1}} - {{jianzhi1.time2}}</text>
			</view>
			<view class="a3">
				<view class="iconfont icon-dizhi "></view>
				<text>地址：{{jianzhi1.dizhi}}</text>
			</view>
			<view class="a4">
				<view class="iconfont icon-jiesuan "></view>
				<text>结算：{{jianzhi1.jiesuan}}</text>
			</view>
		</view>
		
		<view class="miaoshu">
			<view class="b1">
				职位描述
			</view>
			<view class="b">
				<view class="b2">
					{{jianzhi1.miaoshu}}
				</view>
				<view class="baoming" @click="baoming">
					<text>我要报名</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				jianzhi1:{}
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.jianzhi()
		},
		methods: {
			//兼职
			async jianzhi(){
				console.log("兼职");
				const res = await this.$myRuquest({
					url:'/find?id='+this.id
				})
				/* this.flag=true
				this.flag1=false */
				this.jianzhi1=res.data
				/* this.info=res.data[0] */
			},
			baoming(){
				console.log("报名点击")
				uni.showToast({
					title: '报名成功'
				});
				/* uni.switchTab({
				   url:'../message/message?id='+id
				}); */
			}
			
			
		}
	}
</script>

<style lang="scss">
/* 兼职信息 */
	.body{
		background-color: #E88807;
	}
	.work_list{
		padding: 0 15rpx 1rpx 0px;
		margin: 0 15rpx 0px 0px;
		flex-wrap: wrap;//换行
		justify-content: space-between;//左右间距
		.work_item{
			display: flex;//在一行显示
			background-color: #fff;
			width: 750rpx;
			margin: 3rpx 0px;
			padding: 15rpx;
			box-sizing: border-box;
			image{
				width: 200rpx;
				height: 200rpx;
				display: block;
				margin: 0 5rpx;//图片居中
			}
			.three{

				.price{
					width: 100%;
					color: #000;
					font-size: 35rpx;
					margin: 7rpx 0;
					display: flex;//在一行显示
					
					text:nth-child(2){
						position: absolute;
						right: 10px;
						color: #fff;
						background-color: #E88807;
						border-radius: 5px;
						font-size: 26rpx;
						padding: 3px 2px;
						margin-left: 5rpx;
					}
				}
				
				.name{
					display: flex;//在一行显示
					font-size: 30rpx;
					line-height: 25rpx;
					margin-top:15px ;
					color: #2C405A;
					padding:10rpx 0px 10rpx 0rpx ;
				}
				.time1{
					margin-top: 25rpx;
					color: #2C405A;
					text:nth-child(1){
						color: #E88807;
						font-size: 30rpx;
						margin-left: 0rpx;
					}
				}
			}
		}
	} 
	
	.two{
		flex-wrap: wrap;//换行
		margin: 10px 0px 0px 5px;
		.a1,.a2,.a3,.a4{
			margin: 6px;
			display: flex;//在一行显示
			view{
				font-size: 23px;
				margin: auto 5px;
			}
			text{
				font-size: 17px;
			}
			
		}	
	}
	
	.miaoshu{
		.b1{
			color: #E88807;
			background-color: #3F536E;
			margin: 10px 0px;
			padding: 5px 10px;
		}
		.b{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.b2{
				padding: 0px 10px;
			}
			.baoming{
				position: absolute;
				bottom: 15px;
				left: 40%;
				background-color: #E88807;
				color: #fff;
				padding: 10px 10px;
				border-radius: 5px;
			}
		}
	}
</style>
